<template>
  <div>
    <div class="box">
      <el-form
        :inline="true"
        size="medium "
        :model="queryObj"
        class="demo-form-inline form_top"
      >
        <el-form-item
          label="点位搜索:"
          extra
          style="font-size: 16px; font-weight: 400"
        >
          <el-input
            v-model="queryObj.name"
            placeholder="请输入"
            clearable
            @clear="clear"
          />
        </el-form-item>
        <el-form-item label="区域搜索">
          <el-select v-model="queryObj.regionId" placeholder="请输入" clearable>
            <el-option
              v-for="item in currentPageRecordsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="formbutton"
            @click="onSubmit"
          >查询</el-button>
        </el-form-item>
      </el-form>
      <!-- form表单下按钮 -->
      <div class="button_top">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          class="formbutton buttonbodytop"
          @click="addArea('add')"
        >新建</el-button>
        <!-- table表格 -->
        <el-table
          style="width: 100%"
          class="table_top"
          :data="listData.currentPageRecords"
          :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
        >
          <el-table-column
            label="序号"
            width="80px"
            type="index"
            :index="indexMethod"
          />
          <el-table-column label="点位名称" align="center" prop="name" />
          <el-table-column label="所在区域" align="center" prop="region.name" />
          <el-table-column
            label="商圈类型"
            align="center"
            prop="businessType.name"
          />
          <el-table-column label="合作商" align="center" prop="ownerName" />
          <el-table-column label="详细地址" align="center" prop="addr" />
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button
                type="text"
                class="button_table_foot"
                @click="viewDetails(row.id)"
              >查看详情</el-button>
              <el-button
                type="text"
                class="button_table_foot"
                @click="modifyArea(row.id, 'edit')"
              >修改</el-button>
              <el-button
                type="text"
                class="button_table_foot remove"
                @click="dellist(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="foot">
          <p>
            共{{ listData.totalCount }}条记录 第{{ listData.pageIndex }} /{{
              listData.totalPage
            }}
            页
          </p>
          <div class="foot_button">
            <el-button
              type="primary"
              plain
              :class="{
                foot_button_top: true,
                isgrey: queryObj.pageIndex === 1
              }"
              :disabled="queryObj.pageIndex === 1 ? true : false"
              @click="previous"
            >上一页</el-button>
            <el-button
              type="success"
              plain
              class="foot_button_foot"
              :class="{
                foot_button_top: true,
                isgrey: queryObj.pageIndex === Number(listData.totalPage)
              }"
              :disabled="
                queryObj.pageIndex === Number(listData.totalPage) ? true : false
              "
              @click="nextPage"
            >下一页</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增弹窗 -->
    <el-dialog
      :title="type === 'add' ? '新增点位' : '修改点位'"
      :visible.sync="dialogVisible"
      width="40%"
      class="dialog"
    >
      <!-- 弹窗from表单 -->
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        size="medium "
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="点位名称:" prop="name">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入"
            maxlength="15"
            show-word-limit
            class="inp"
          />
        </el-form-item>

        <el-form-item label="所在区域:" prop="regionId">
          <el-select
            v-model="ruleForm.regionId"
            placeholder="请选择"
            class="inp"
          >
            <el-option
              v-for="item in dialogLocalArea"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属商圈:" prop="businessId">
          <el-select
            v-model="ruleForm.businessId"
            placeholder="请选择"
            class="inp"
          >
            <el-option
              v-for="item in upBusinessCircle"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="归属合作商:" prop="ownerId">
          <el-select
            v-model="ruleForm.ownerId"
            placeholder="请选择"
            class="inp"
          >
            <el-option
              v-for="item in dialogpartnerSearch"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="详细地址:" prop="areaCode">
          <el-cascader
            v-model="ruleForm.areaCode"
            placeholder="请选择 "
            class="inp"
            size="large"
            :options="options"
            @change="addressChange"
          />
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="ruleForm.addr"
            :rows="4"
            type="textarea"
            placeholder="请输入详细地址"
            maxlength="60"
            show-word-limit
            class="inp"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="dialogqv"
          @click="dialogVisible = false"
        >取 消</el-button>
        <el-button
          type="primary"
          class="dialogqve"
          @click="increased"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 区域详情弹窗 -->
    <el-dialog
      title="点位详情"
      :visible.sync="isdialogVisible"
      width="40%"
      class="dialog"
    >
      <el-table
        :data="currentPageRecords"
        class="pp_tb"
        :header-cell-style="{ backgroundColor: '#f3f6fb' }"
      >
        <el-table-column prop="date" label="序号" type="index" />
        <el-table-column prop="innerCode" label="机器编号" align="center" />
        <el-table-column label="设备状态" align="center">
          <template #default="{ row }">
            {{ row.vmStatus ? '运营' : '未投放' }}
          </template>
        </el-table-column>
        <el-table-column
          class="table_top_button"
          prop="updateTime"
          label="最后一次供货时间"
          align="center"
        />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRender,
  areaSearchList,
  deletePoint,
  pointDetail,
  dialogBusinessCircle,
  partnerSearch,
  newPoint,
  modificationPoint
} from '@/api/PointPosition'
import { regionData } from 'element-china-area-data'
// CodeToText
export default {
  name: 'Dianwei',
  // components: {
  //   vdistpicker
  // },
  data() {
    return {

      formInline: {
        user: '',
        region: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        name: null,
        regionId: null
      },
      id: null,
      ruleForm: {
        name: null,
        regionId: null,
        businessId: null,
        ownerId: null,
        areaCode: null,
        addr: null
      },
      rules: {
        name: [
          { required: true, message: '请输入点位名称', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        regionId: [
          { required: true, message: '请输入必填内容', trigger: 'change' }
        ],
        businessId: [
          { required: true, message: '请选择内容', trigger: 'change' }
        ],
        ownerId: [
          { required: true, message: '请选择内容', trigger: 'change' }
        ],
        areaCode: [
          { required: true, message: '请选择内容', trigger: 'change' }
        ],
        addr: [
          { required: true, message: '请输入必填内容', trigger: 'change' },
          { min: 1, max: 40, message: '长度在 1 到 40 个字符', trigger: 'blur' }
        ]

      },
      listData: {}, //  渲染数据
      type: null,
      dialogVisible: false, // 新增修改弹窗
      isdialogVisible: false, // 区域详情弹窗
      currentPageRecords: null,
      name: null,
      currentPageRecordsList: null, // 点位区域搜索列表
      options: regionData,
      selectedOptions: [],
      dialogLocalArea: null, // 弹窗所在区域
      upBusinessCircle: null, // 弹窗所属商圈
      dialogpartnerSearch: null, // 弹窗合作商
      res: null,
      aa: null
    }
  },
  created() {
    this.render()
    this.search()
  },
  methods: {
  // 获取渲染列表
    async render() {
      const data = await areaSearchList(this.queryObj)
      console.log(data)

      data.currentPageRecords.forEach(item => {
        item.addr = item.addr.slice(12)
      })
      this.listData = data
    },
    // 下一页
    nextPage() {
      this.queryObj.pageIndex += 1
      this.render()
      console.log(this.listData)
    },
    // 上一页
    previous() {
      this.queryObj.pageIndex -= 1
      this.render()
    },
    // 序号
    indexMethod(index) {
      return (this.queryObj.pageIndex - 1) * 10 + (index + 1)
    },
    // 查询
    onSubmit() {
      this.render()
    },
    clear() {
      this.queryObj.name = null
      this.render()
    },
    // 新建
    addArea(type) {
      this.dialogVisible = true
      this.type = type
      this.popLocalArea()
      this.popbusinessCircle()
      this.poppartnerSearch()
    },
    // 新增修改
    async increased() {
      if (this.type === 'add') {
        try {
          await this.$refs.ruleForm.validate()
          this.res = this.dialogpartnerSearch.find(item => item.id === this.ruleForm.ownerId)
          await newPoint({
            name: this.ruleForm.name,
            regionId: this.ruleForm.regionId,
            businessId: this.ruleForm.businessId,
            ownerId: this.ruleForm.ownerId,
            areaCode: this.selectedOptions[2],
            addr: '123456789100' + this.ruleForm.addr,
            createUserId: 1,
            ownerName: this.res.name
          })
          this.render()
          this.dialogVisible = false
          this.$message({
            message: '新增成功',
            type: 'success',
            offset: 100
          })
          this.ruleForm = {
            name: null,
            regionId: null,
            businessId: null,
            ownerId: null,
            areaCode: null,
            addr: null
          }
          this.$refs.ruleForm.resetFields()
        } catch (error) {
          console.log(error)
        }
      }
      if (this.type === 'edit') {
        try {
          await this.$refs.ruleForm.validate()
          // console.log(this.ruleForm)
          this.res = this.dialogpartnerSearch.find(item => item.id === this.ruleForm.ownerId)
          await modificationPoint({
            id: this.id,
            name: this.ruleForm.name,
            regionId: this.ruleForm.regionId,
            businessId: this.ruleForm.businessId,
            ownerId: this.ruleForm.ownerId,
            areaCode: this.selectedOptions[2],
            addr: '123456789100' + this.ruleForm.addr,
            createUserId: 1,
            ownerName: this.res.name
          })
          this.render()
          this.dialogVisible = false
          this.$message({
            message: '修改成功',
            type: 'success',
            offset: 100
          })
          this.ruleForm = {
            name: null,
            regionId: null,
            businessId: null,
            ownerId: null,
            areaCode: null,
            addr: null
          }
          this.$refs.ruleForm.resetFields()
        } catch (error) {
          console.log(error)
          // this.$message({
          //   message: '原始数据不能修改',
          //   type: 'warning',
          //   offset: 100
          // })
        }
      }
    },
    // 修改
    async modifyArea(id, type) {
      this.id = id
      this.type = type
      this.popLocalArea()
      this.popbusinessCircle()
      this.poppartnerSearch()
      const data = this.listData.currentPageRecords.find(item => item.id === id)
      console.log(data)
      this.ruleForm = {
        name: data.name,
        regionId: data.region.id,
        businessId: data.businessId,
        ownerId: data.ownerId,
        areaCode: data.areaCode,
        addr: data.addr
      }
      this.dialogVisible = true
      // console.log(data)
    },
    // 删除
    async dellist(id) {
      try {
        await deletePoint({ id })
        this.$notify({
          message: '删除成功',
          title: '提示',
          type: 'success',
          offset: 100,
          duration: 1000
        })
        this.render()
      } catch (error) {
        // console.log(error)
        this.$notify.info({
          title: '提示',
          message: '演示系统，不支持此操作',
          type: 'warning',
          offset: 100,
          duration: 1000
        })
      }
    },
    // 查看详情
    async viewDetails(id) {
      const data = await pointDetail({ id })
      data.forEach(item => {
        item.updateTime = item.updateTime.replaceAll('-', '.')
        item.updateTime = item.updateTime.replace('T', ' ')
      })
      this.currentPageRecords = data
      this.isdialogVisible = true
      console.log(data)
    },
    // 头部搜索列表
    async search() {
      const data = await getRender({ pageIndex: 1, pageSize: 10000 })
      console.log(data)
      this.currentPageRecordsList = data.currentPageRecords
    },
    // 三级地区联动
    addressChange(arr) {
      console.log(arr)
    },
    // 弹窗所在区域
    async popLocalArea() {
      const data = await getRender({ pageIndex: 1, pageSize: 1000 })
      console.log(data)
      this.dialogLocalArea = data.currentPageRecords
    },
    // 弹窗所属商圈
    async  popbusinessCircle() {
      const data = await dialogBusinessCircle()
      this.upBusinessCircle = data
    },
    // 弹窗合作商搜索
    async poppartnerSearch() {
      const data = await partnerSearch({ pageIndex: 1, pageSize: 100000 })
      this.dialogpartnerSearch = data.currentPageRecords
    }

  }
}
</script>

<style scoped lang="scss">
// .table_top_button {
//   margin-right: 20px;
// }
::v-deep .el-table td,
.el-table th.is-leaf {
  border-bottom: none;
}
.boxbox {
  padding-left: 50px;
  font-weight: normal;
  color: #898a8d;
}
::v-deep .cell {
  font-weight: normal;
  color: #6a6a6a;
}
.p_top {
  display: flex;
}
.p_foot {
  display: flex;
}
.pp_tb {
  margin-left: 8px;
  padding-right: 20px;
}
.p_body {
  margin-left: 10px;
}

.isgrey {
  background-color: #edf0f9 !important;
  color: #d8dde6 !important;
}
::v-deep .el-dialog__footer {
  text-align: center;
}
.dialog {
  font-weight: 800;
}
.inp {
  width: 400px;
}
.dialogqv {
  background-color: #f3e7e1;
  border: 0px;
}
.dialogqve {
  background-color: #f56931;
  border: 0px;
}
::v-deep .el-form-item__label {
  font-weight: normal;
}
.box {
  ::v-deep .el-form-item__label {
    font-weight: normal;
  }
  ::v-deep .el-table th > .cell {
    font-weight: normal;
    color: #666666;
  }
  .remove {
    color: #ed446e !important ;
  }

  margin: 20px 15px 0 15px;
  .demo-form-inline.form_top {
    height: 60px;
    background-color: #fff;
    padding-top: 11px;
    padding-left: 16px;
    .formbutton {
      background-color: #5f84ff;
    }
  }
  .button_top {
    margin-top: 15px;
    background-color: #fff;
    padding-left: 15px;
    padding-top: 15px;
    margin-bottom: 15px;
    .buttonbodytop {
      border: 0px;
      background-color: #ff883a;
    }
    .buttonbodyfoot {
      border: 0px;
      background-color: #fbf4f0;
      color: #655b56;
    }
    .table_top {
      margin-top: 15px;
      .button_table_foot {
        color: #5f84ff;
      }
    }
    .foot {
      display: flex;
      justify-content: space-between;

      margin-top: 40px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 30px;
      p {
        color: #dbdfe5;
      }
      .foot_button {
        height: 30px;
        line-height: 30px;
        .foot_button_top {
          margin-right: 15px;
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
        .foot_button_foot {
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
      }
    }
  }
}
</style>
